<template>
    <div>
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-currentcity :cities="cities" :hotCities="hotCities" :letter="letter"></city-currentcity>
        <city-string :cities="cities" @change="cityclickchange"></city-string>
    </div>
</template>
<script>
import CityHeader from '@/city/components/header'
import CitySearch from '@/city/components/search'
import CityString from '@/city/components/string'
import CityCurrentcity from '@/city/components/currentcity'


import axios from 'axios'
    export default{
        name:"city",
        components:{
            CityHeader,
            CitySearch,
            CityString,
            CityCurrentcity
           
        },
        data(){
            return{
                hotCities:[],
                cities:{},
                letter:""   //abcd
            }
        },
         methods:{
            getHomeInfo(){
                //请求数据
                axios.get('static/moke/city.json').then(this.getSucc)
            },
            getSucc(res){ //对数据进行处理
                var res=res.data;
                // var hotCities=res.data.data.hotCities; //请求的结果
                // console.log(res);
                if(res.ret && res.data){
                    this.hotCities=res.data.hotCities;
                    this.cities=res.data.cities;
                }
            },
            cityclickchange(res){//监听事件、
                this.letter=res;
        },
        },
        
        mounted() { //生命周期钩子函数
            this.getHomeInfo()
        }

    }
</script>
<style lang="stylus">
</style>